<template>
  <el-container class="layout-container-demo" style="height: 500px">

    <el-container>

      <el-header style="background: #92adce;  font-size: 12px; height: 46px">
        <van-nav-bar
            title="课 程"
            left-text=""
        >

          <template #right>
            <div class="toolbar-right">
              <span>{{ userInfo.studentName }}</span>
            </div>
          </template>

        </van-nav-bar>

      </el-header>

      <el-main>
        <el-scrollbar>
          <el-table :data="courseListTableData" :cell-style="{padding:4+'px'}">

            <el-table-column align="center" prop="courseId" label="课程号" width="70">
            </el-table-column>

            <el-table-column align="center" prop="courseName" label="课程名" width="90">

            </el-table-column>

            <el-table-column align="center" prop="classHour" label="课时" width="70">

            </el-table-column>

            <el-table-column align="center" prop="credit" label="学分" width="70">

            </el-table-column>

            <el-table-column align="center" prop="courseFaculty" label="课程院系" width="85">
            </el-table-column>

<!--            <el-table-column align="center" prop="courseStatus" label="状态" width="65">-->

<!--            </el-table-column>-->

          </el-table>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>

import {ElMessageBox} from 'element-plus';
import {onMounted, ref} from 'vue'
import {Menu as IconMenu, Message, Setting} from '@element-plus/icons-vue'
import axios from "axios";
import {showFailToast} from "vant";


let userInfo = ref({
  studentId: -1,
  userName: -1,
  studentName: '',
})


// const item = {
//   date: '2016-05-02',
//   name: 'Tom',
//   address: 'No. 189, Grove St, Los Angeles',
// }


let courseListTableData = ref([]);
let queryList = {};
let queryCourseSelectList = ref([]);

// const tableData = ref(Array.from({ length: 6 }).fill(form))

// function reset() {
//   this.form = {
//     selectId: null,
//     courseId: null,
//     courseName: null,
//     credit: null,
//     needNum: null,
//     selectedNum: null
//   }
// }


function queryStudentCourseSelect() {
  // reset();


}

function getcourseListTableData() {
  // reset();
  queryList['studentId'] = userInfo.value.studentId;
  axios.get("/course/course_selected/swlist", queryList).then((res) => {
    queryCourseSelectList.value = res.data.list;

    // queryList = [];
    queryList = queryCourseSelectList.value;

    axios.post("/course/manage/checklist", queryList).then((res) => {
      courseListTableData.value = res.data.list;
    })



    }).catch((err) => {
      showFailToast('您还未选择课程！');
  });
}


//onMounted当页面加载时，显示数据
onMounted(() => {


  axios.get('/getInfo', {
    headers: {
      'Authorization': 'Bearer ' + sessionStorage.token
    }
  }).then(res => {
    userInfo.value.userName = res.data.user.userName;
    userInfo.value.studentId = res.data.user.studentId;
    userInfo.value.studentName = res.data.student.name;
  }).catch(error => {
    // 请求失败，弹出提示消息
    showFailToast('登录失效，请重新登录！');
  });

  getcourseListTableData();

});


</script>

<style scoped>
/deep/ .el-table .cell {
  padding: 3px 0px;

}

.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
